import WebpackLicense from '@components/WebpackLicense';

<WebpackLicense from="https://webpack.js.org/plugins/normal-module-replacement-plugin/" />

# NormalModuleReplacementPlugin

The `NormalModuleReplacementPlugin` allows you to replace resources that match `resourceRegExp` with `newResource`.

```js
new rspack.NormalModuleReplacementPlugin(resourceRegExp, newResource);
```

If `newResource` is relative, it is resolved relative to the previous resource.

If `newResource` is a function, it is expected to overwrite the request attribute of the supplied resource.

This can be useful for allowing different behaviour between builds.

:::tip
Note that the `resourceRegExp` is tested against the "request" on `beforeResolve` phase and the "resource" on `afterResolve` phase.

Also, please note that when using Windows, you have to accommodate for the different folder separator symbol. E.g. `/src\/environments\/environment\.ts/` won't work on Windows, you have to use `/src[\\/]environments[\\/]environment\.ts/` instead.
:::

## Basic example

Replace a specific module when building for a production environment.

Say you have a configuration file `some/path/config.development.js` and a special version for production in `some/path/config.production.js`

Add the following plugin when building for production:

```js
new rspack.NormalModuleReplacementPlugin(
  /some\/path\/config\.development\.js/,
  './config.production.js',
);
```

## Advanced example

Conditional build depending on a specified environment.

Say you want a configuration with specific values for different build targets.

```js
module.exports = function getRspackConfig(env) {
  const appTarget = env.APP_TARGET || 'VERSION_A';
  return {
    plugins: [
      new rspack.NormalModuleReplacementPlugin(
        /(.*)-APP_TARGET(\.*)/,
        function (resource) {
          resource.request = resource.request.replace(
            /-APP_TARGET/,
            `-${appTarget}`,
          );
        },
      ),
    ],
  };
};
```

Create the two configuration files:

```js title="app/config-VERSION_A.js"
export const config = {
  title: 'I am version A',
};
```

```js title="app/config-VERSION_B.js"
export const config = {
  title: 'I am version B',
};
```

Then import that configuration using the keyword you're looking for in the regexp:

```js
import { config } from './app/config-APP_TARGET';
console.log(config.title);
```

And now you get the right configuration imported depending on which target you're building for:

```bash
rspack --env APP_TARGET=VERSION_A
=> 'I am version A'

rspack --env APP_TARGET=VERSION_B
=> 'I am version B'
```
